<!--
 * @Descripttion: 统计数值组件
 * @version: 1.1
 * @Author: sakuya
 * @Date: 2021年6月23日13:11:32
 * @LastEditors: sakuya
 * @LastEditTime: 2022年5月14日19:55:09
-->

<template>
	<div class="sc-statistic">
		<div class="sc-statistic-title">
			{{ title }}
			<el-tooltip v-if="tips" effect="light">
				<template #content>
					<div style="width: 200px; line-height: 2">
						{{ tips }}
					</div>
				</template>
				<el-icon class="sc-statistic-tips"><el-icon-question-filled /></el-icon>
			</el-tooltip>
		</div>
		<div class="sc-statistic-content">
			<span v-if="prefix" class="sc-statistic-content-prefix">{{ prefix }}</span>
			<span class="sc-statistic-content-value">{{ cmtValue }}</span>
			<span v-if="suffix" class="sc-statistic-content-suffix">{{ suffix }}</span>
		</div>
		<div v-if="description || $slots.default" class="sc-statistic-description">
			<slot>
				{{ description }}
			</slot>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			title: { type: String, required: true, default: '' },
			value: { type: String, required: true, default: '' },
			prefix: { type: String, default: '' },
			suffix: { type: String, default: '' },
			description: { type: String, default: '' },
			tips: { type: String, default: '' },
			groupSeparator: { type: Boolean, default: false }
		},
		data() {
			return {}
		},
		computed: {
			cmtValue() {
				return this.groupSeparator ? this.$TOOL.groupSeparator(this.value) : this.value
			}
		}
	}
</script>

<style scoped>
	.sc-statistic-title {
		font-size: 12px;
		color: #999;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
	}
	.sc-statistic-tips {
		margin-left: 5px;
	}
	.sc-statistic-content {
		font-size: 20px;
		color: #333;
	}
	.sc-statistic-content-value {
		font-weight: bold;
	}
	.sc-statistic-content-prefix {
		margin-right: 5px;
	}
	.sc-statistic-content-suffix {
		margin-left: 5px;
		font-size: 12px;
	}
	.sc-statistic-description {
		margin-top: 10px;
		color: #999;
	}

	.dark .sc-statistic-content {
		color: #d0d0d0;
	}
</style>
